// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";
@import "syntax-variables";

//    ##     ## ######## ##       ########  ######## ########   ######
//    ##     ## ##       ##       ##     ## ##       ##     ## ##    ##
//    ##     ## ##       ##       ##     ## ##       ##     ## ##
//    ######### ######   ##       ########  ######   ########   ######
//    ##     ## ##       ##       ##        ##       ##   ##         ##
//    ##     ## ##       ##       ##        ##       ##    ##  ##    ##
//    ##     ## ######## ######## ##        ######## ##     ##  ######

.absolute-box {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.background-color {
  box-sizing: border-box;
  background-attachment: fixed;
}

.icon-pigments::before {
  content: '';
  width: 1em;
  height: 1em;
  display: inline-block;
  background-image: url(atom://pigments/resources/icon.svg);
  background-size: 1em;
  vertical-align: middle;
}

.icon[data-name=".pigments"]::before {
  content: '';
  width: 1em;
  height: 1em;
  display: inline-block;
  background-image: url(atom://pigments/resources/icon.svg);
  background-size: 1em;
  margin-top: 0.2em;
}

//    ##     ##    ###    ########  ##    ## ######## ########   ######
//    ###   ###   ## ##   ##     ## ##   ##  ##       ##     ## ##    ##
//    #### ####  ##   ##  ##     ## ##  ##   ##       ##     ## ##
//    ## ### ## ##     ## ########  #####    ######   ########   ######
//    ##     ## ######### ##   ##   ##  ##   ##       ##   ##         ##
//    ##     ## ##     ## ##    ##  ##   ##  ##       ##    ##  ##    ##
//    ##     ## ##     ## ##     ## ##    ## ######## ##     ##  ######

atom-panel-container.footer {
  z-index: 3;
}

atom-text-editor {
  .pigments-native-background {
    position: relative;
    .background-color;
  }

  .pigments-native-background-in-selection {
    background: transparent !important;
    color: inherit !important;
  }

  .pigments-native-underline .region,
  .pigments-native-underline-in-selection .region {
    position: absolute;
    white-space: nowrap;
    .background-color;
    z-index: 1;
    height: 2px !important;
    margin-top: 1.3em; // adjust to your liking
  }

  .pigments-native-outline .region,
  .pigments-native-outline-in-selection .region {
    position: absolute;
    white-space: nowrap;
    margin-left: -1px;
    margin-top: -1px;
    padding: 1px 2px;
    box-sizing: content-box !important;

    border-radius: 0;

    &::before {
      box-sizing: border-box;
      border: 2px solid transparent;
      border-image: -webkit-repeating-linear-gradient(45deg, #808080 4px, #6A6A6A 4px, #6A6A6A 8px, #808080 8px, #808080 12px) 1 1 1 1 round;
      content: '';
      border-radius: inherit;
      background-color: inherit;
      border-radius: inherit;
      .absolute-box;
    }

    &::after {
      box-sizing: border-box;
      content: '';
      display: block;
      border: 2px solid transparent;
      border-color: inherit;
      border-radius: inherit;
      .absolute-box;
    }
  }

  .gutter .pigments-gutter-marker div,
  .gutter .pigments-gutter-marker-in-selection div {
    display: flex;
    align-items: center;
    padding: 0 0 0 2px;
    position: absolute;

    span {
      width: 12px;
      height: 12px;
      display: block;
      box-sizing: border-box;
      // border-radius: 50%;
      position: relative;
      .background-color;
    }
  }

  .gutter .pigments-gutter-marker-in-selection div span::after {
    border: 1px solid @text-color-highlight;
  }

  .gutter[gutter-name="pigments-native-dot"],
  .gutter[gutter-name="pigments-native-square-dot"] {
    overflow: visible;
    z-index: 2;
    min-width: 0;

    .pigments-gutter-marker div span,
    .pigments-gutter-marker-in-selection div span {
      width: 12px;
      height: 12px;
      transform: translate(100%, 0);
    }
  }

  .gutter[gutter-name="pigments-native-dot"] .pigments-gutter-marker div,
  .gutter[gutter-name="pigments-native-dot"] .pigments-gutter-marker-in-selection div {
    span {
      border-radius: 50%
    }
  }

  pigments-markers,
  pigments-markers {
    position: relative;
    display: block;
    z-index: 1;

    &.above-editor-content {
      z-index: 1;
    }
  }

  pigments-markers pigments-color-marker,
  pigments-markers pigments-color-marker,
  pigments-color-marker {
    display: block;
    position: absolute;

    &.hidden {
      .region.background {
        display: none;
      }

    }

    &.in-fold {
      display: none;
    }

    .region {
      position: absolute;
      white-space: pre;

      &.background {
        border-radius: 2px;
      }

      &.outline {
        margin-left: -1px;
        margin-top: -2px;
        padding-left: 4px;

        border-radius: 0;

        &::before {
          box-sizing: border-box;
          border: 2px solid transparent;
          border-image: -webkit-repeating-linear-gradient(45deg, #808080 4px, #6A6A6A 4px, #6A6A6A 8px, #808080 8px, #808080 12px) 1 1 1 1 round;
          content: '';
          border-radius: inherit;
          background-color: inherit;
          border-radius: inherit;
          .absolute-box;
        }

        &::after {
          box-sizing: border-box;
          content: '';
          display: block;
          border: 2px solid transparent;
          border-color: inherit;
          border-radius: inherit;
          .absolute-box;
        }
      }

      &.underline {
        height: 2px !important;
        margin-top: 1.3em; // adjust to your liking
      }

      &.background, &.underline {
        .background-color;
      }
    }

    &.dot {
      width: 1em;
      height: 1em;
      border-radius: 50%;
      vertical-align: bottom;
      transform: translate(0%, -50%);

      &:before {
        content: '';
        background: url(atom://pigments/resources/transparent-background.png);
        background-size: 100%;
        border-radius: inherit;
        .absolute-box;
      }

      &:after {
        content: '';
        background: inherit;
        border-radius: inherit;
        .absolute-box;
      }

      &.square {
        border-radius: 0;
      }
    }
  }
}

//     ######  ##     ##  ######    ######   ########  ######  ########
//    ##    ## ##     ## ##    ##  ##    ##  ##       ##    ##    ##
//    ##       ##     ## ##        ##        ##       ##          ##
//     ######  ##     ## ##   #### ##   #### ######    ######     ##
//          ## ##     ## ##    ##  ##    ##  ##             ##    ##
//    ##    ## ##     ## ##    ##  ##    ##  ##       ##    ##    ##
//     ######   #######   ######    ######   ########  ######     ##

.color-suggestion .label {
  opacity: 1 !important;
}
.color-suggestion-preview {
  display: inline-block;
  vertical-align: middle;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
}

//     ######  ########    ###    ########   ######  ##     ##
//    ##    ## ##         ## ##   ##     ## ##    ## ##     ##
//    ##       ##        ##   ##  ##     ## ##       ##     ##
//     ######  ######   ##     ## ########  ##       #########
//          ## ##       ######### ##   ##   ##       ##     ##
//    ##    ## ##       ##     ## ##    ##  ##    ## ##     ##
//     ######  ######## ##     ## ##     ##  ######  ##     ##

pigments-color-results {
  display: block;
  width: 100%;

  .panel-heading {
    min-height: 2.7em;
  }

  atom-panel.preview-pane {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    // overflow: auto;
  }

  .match.color-match {
    padding: 0.25em 0.4em;
  }

  .preview-pane {
    position: relative;
    display: -webkit-flex;
    -webkit-flex-direction: column;

    .results-view {
      overflow: auto;
      position: relative;
      padding: 0 @component-padding;
      -webkit-flex: 1;

      .line-number {
        margin-right: 1ex;
        text-align: right;
        display: inline-block;
      }

      .search-result {
        padding-top: 0.25em;
        padding-bottom: 0.25em;
        cursor: alias;

        &:hover {
          background: @background-color-highlight;
        }
      }

      .preview {
        font-family: monospace;
      }
    }
  }
}

//     ######   ##     ##    ###    ########  ########
//    ##    ##  ##     ##   ## ##   ##     ## ##     ##
//    ##        ##     ##  ##   ##  ##     ## ##     ##
//    ##   #### ##     ## ##     ## ########  ##     ##
//    ##    ##  ##     ## ######### ##   ##   ##     ##
//    ##    ##  ##     ## ##     ## ##    ##  ##     ##
//     ######    #######  ##     ## ##     ## ########

pigments-sources-popup {
  .inset-panel {
    margin-bottom: 0.75em;
  }
}

//    ########     ###    ##       ######## ######## ######## ########
//    ##     ##   ## ##   ##       ##          ##       ##    ##
//    ##     ##  ##   ##  ##       ##          ##       ##    ##
//    ########  ##     ## ##       ######      ##       ##    ######
//    ##        ######### ##       ##          ##       ##    ##
//    ##        ##     ## ##       ##          ##       ##    ##
//    ##        ##     ## ######## ########    ##       ##    ########

pigments-palette {
  background: @syntax-background-color;
  color: @text-color;
  font-size: 1.2em;

  .pigments-palette-list, .pigments-palette-controls {
    display: -webkit-flex;
    position: relative;
    width: 100%;
  }

  //    ##       ####  ######  ########
  //    ##        ##  ##    ##    ##
  //    ##        ##  ##          ##
  //    ##        ##   ######     ##
  //    ##        ##        ##    ##
  //    ##        ##  ##    ##    ##
  //    ######## ####  ######     ##

  ol {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  li {
    padding: @component-padding;
    list-style: none;
    border-bottom: 1px solid @base-border-color;
    display: -webkit-flex;
    -webkit-flex-direction: row;

    &.pigments-color-group {
      padding: 0;
      border-bottom: none;
      -webkit-flex-direction: column;
    }
  }
  [data-variable-id] {
    cursor: alias;
    pointer-events: auto;
    padding-left: 1em;
    display: inline-block;
  }
  [data-variable-id] * {
    pointer-events: none;
  }

  .path, .line {
    color: @text-color-subtle;
  }

  .pigments-color-group .path {
    display: none;
  }

  .pigments-color-group-header-content {
    border-bottom: 1px solid @base-border-color;
    display: inline-block;
    background: @syntax-background-color;
    padding: @component-padding;
    width: 100%;

    &.fixed {
      position: fixed;
      width: 100%;
      box-sizing: border-box;
      z-index: 10;
    }

    &.absolute {
      position: absolute;
    }
  }

  .pigments-palette-list {
    overflow-y: auto;
    background: @tool-panel-background-color;
  }

  .pigments-color, .pigments-color-details {
    display: -webkit-flex;
  }

  .pigments-color-details {
    -webkit-flex-flow: column;
    -webkit-flex: 1;
  }

  .pigments-color {
    -webkit-flex-flow: row;
  }

  .pigments-color-properties {
    width: 8em;

    span {
      display: block;
      float: left;
      width: 50%;
      color: @text-color;
    }

    strong {
      color: @text-color-subtle;
    }
  }

  .pigments-color-preview {
    .background-color;

    position: relative;
    width: 3em;
    height: 3em;
    margin-right: @component-padding;
    z-index: 0;

    &:before {
      z-index: 0;
    }
    &:after {
      z-index: 1;
    }
  }

  //     ######  ######## ########  ##        ######
  //    ##    ##    ##    ##     ## ##       ##    ##
  //    ##          ##    ##     ## ##       ##
  //    ##          ##    ########  ##        ######
  //    ##          ##    ##   ##   ##             ##
  //    ##    ##    ##    ##    ##  ##       ##    ##
  //     ######     ##    ##     ## ########  ######

  select {
    margin: 0 0.5em;
    background: @input-background-color;
    border: 1px solid @input-border-color;
    color: @text-color;
    font-family: @font-family;
  }

  .settings-view input[type="checkbox"] {
    margin: 0 0.5em 0 0;
    vertical-align: text-bottom;
    font-size: 0.8em;
  }

  .pigments-palette-panel {
    display: -webkit-flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-flex-flow: column;
  }

  .pigments-palette-controls {
    min-height: -webkit-min-content;
  }

  .pigments-palette-controls-wrapper {
    border-bottom: 1px solid @base-border-color;
    padding: @component-padding;
    width: 100%;
  }

  .input-group-inline {
    margin-right: 1em;
  }
}

//     ######  ######## ######## ######## #### ##    ##  ######    ######
//    ##    ## ##          ##       ##     ##  ###   ## ##    ##  ##    ##
//    ##       ##          ##       ##     ##  ####  ## ##        ##
//     ######  ######      ##       ##     ##  ## ## ## ##   ####  ######
//          ## ##          ##       ##     ##  ##  #### ##    ##        ##
//    ##    ## ##          ##       ##     ##  ##   ### ##    ##  ##    ##
//     ######  ########    ##       ##    #### ##    ##  ######    ######

pigments-color-project {
  color: @text-color;
  position: relative;

  .header {
    border-bottom: 1px solid @input-border-color;
    padding-bottom: @component-padding * 2;
    text-align: left;
    overflow: hidden;

    .logo {
      float: left;
      margin-right: @component-padding;
    }

    p {
      margin: (@component-padding * 1.5) 0 0;
    }
  }

  .settings-view {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .settings-wrapper {
    width: 90%;
    max-width: 750px;
  }

  .control-group {
    margin-bottom: @component-padding * 2;

    &.boolean {
      padding-left: 150px;

      .controls {
        display: block;
      }

      .control-label {
        width: auto;
      }

      input {
        margin: 0.3em 0.75em 0 0;
      }

      .setting-description {
        margin-top: 0.6em;
      }
    }

    &.array {
      .setting-description {
        display: flex;
        flex-direction: row;
        width: 100%;

        & > div:first-child {
          flex: 1 1 0;
          padding-right: @component-padding * 2;
        }
      }

      .boolean {
        margin: 0;
        padding-left: 0;

        input {
          margin-right: 0;
          order: 2;
        }
        .controls {
          display: flex;
        }
        .control-label {
          padding-right: @component-padding;
        }
        .setting-description {
          margin: 0;
        }
      }
    }
  }

  .fields {
    margin-top: @component-padding * 2;
  }

  .fields .controls, .fields .fields-header {
    display: flex;
    flex-direction: row;
    text-align: left;

    h5 {
      text-align: center;
      font-size: 1.6em;
      font-weight: normal;
      margin-bottom: @component-padding * 2;
    }

  }
  .control-label {
    margin: 0;
    line-height: 2em;
    width: 150px;
    padding-right: @component-padding;
  }

  .control-wrapper {
    padding: 0;
    flex: 1 1 0;

    .setting-description {
      margin-top: 0.4em;
    }
  }
}
